<DOCTYPE html>
    <html lang="zh-CN">

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="bootstrap3\css\bootstrap.min.css" rel="stylesheet">
        <script src="bootstrap3\js\jquery-1.12.4.min.js">

        </script>
        <script src="bootstrap3\js\bootstrap.min.js">

        </script>
        <link href="datepicker\css\bootstrap-datepicker3.css" rel="stylesheet">
        <script src="datepicker\js\bootstrap-datepicker.min.js">

        </script>
        <script src="datepicker\locales\bootstrap-datepicker.zh-CN.min.js">

        </script>
    </head>
    <div class="container-fulid">
        <!--错误1 -->
        <div class="col-md-3">
            <!--错误4 -->
            <h2>列表</h2>
            <p><b>无序列表</b></p>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4
                    <ul>
                        <li>1-1</li>
                        <li>1-2</li>
                        <li>1-3</li>
                        <li>1-4</li>
                    </ul>
                </li>
                <li>5</li>
            </ul>
            <p><strong>有序列表</strong></p>
            <ol>
                <li>a</li>
                <li>b
                    <ul>
                        <li>b-a</li>
                        <li>b-b</li>
                    </ul>
                </li>
                <li>c
                    <ol>
                        <li>c-1</li>
                        <li>c-2</li>
                    </ol>
                </li>
                <li>d</li>
            </ol>

            <p><b>无样式列表</b></p>
            <ul class="list-unstyled">
                <!--错误2 -->
                <li>max</li>
                <li>mid</li>
                <li>min
                    <ul class="list-inline">
                        <li>内敛</li>
                        <li>内联</li>
                        <li>内链</li>
                    </ul>
                </li>
            </ul>
            <p><strong>描述</strong></p>
            <dl>
                <dt>主体内容</dt>
                <dd>描述内容</dd>
            </dl>
            <dl class="dl-horizontal text-overflow">
                <!--错误3 -->
                <dt>主体内容</dt>
                <dd>描述内容</dd>
            </dl>
        </div>

        <div class="col-md-3">
            <h2>代码</h2>
            <p><b>代码的处理</b></p>
            <code>print('hellow');</code>
            <p><b>用户输入</b></p>
            <kbd>user input</kbd>
            <p><b>代码块</b></p>
            <pre>public static  void mian(){....}</pre>
            <p><b>变量</b></p>
            <var>a</var>+<var>b</var>=<var>c</var>
            <p><b>程序输出</b></p>
            <!--错误5 -->
            <samp>the result : c=10</samp>
            <h2>表格</h2>
            <div class="table-responsive">
                <table class="table table-bordered table-hover table-striped table-condensed">
                    <!--错误6 -->
                    <tr class="info">
                        <td>序号</td>
                        <td>姓名</td>
                        <td>年龄</td>
                        <td>操作</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>张三</td>
                        <td>20</td>
                        <td><a>修改</a></td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>李四</td>
                        <td>22</td>
                        <td><a>修改</a></td>
                    </tr>
                </table>
            </div>
            <h2>表单</h2>
            <form>
                <div class="form-group">
                    <label for="tb_email"><span class="glyphicon glyphicon-th-list"></span>&nbsp;Email</label>
                    <input id="tb_email" class="form-control" type="email" placeholder="Email">
                </div>
                <div class="form-group">
                    <label for="tb_pwd"><span class="glyphicon glyphicon-th-list"></span>&nbsp;Password</label>
                    <input id="tb_pwd" class="form-control" type="password" placeholder="Password">
                </div>
                <div class="form-group">
                    <label for="tb_file"><span class="glyphicon glyphicon-th-list"></span>&nbsp;Upload File</label>
                    <input type="file" id="tb_file">
                    <span class="help-block">上传文件</span>
                </div>
                <div class="checkbox">
                    <label>
                    <input type="checkbox">是否超级管理员</label>
                </div>
                <button type="button">确定</button>
            </form>
        </div>
        <div class="col-md-6">
            <h2>表单横向排列</h2>
            <form class="form-inline">
                <div class="form-group">
                    <label for="tb_email"><span class="glyphicon glyphicon-th-list"></span>&nbsp;Email</label>
                    <input id="tb_email" class="form-control" type="email" placeholder="Email">
                </div>
                <div class="form-group">
                    <label for="tb_pwd"><span class="glyphicon glyphicon-th-list"></span>&nbsp;Password</label>
                    <input id="tb_pwd" class="form-control" type="password" placeholder="Password">
                </div>
            </form>

            <form class="form-horizontal">
                <div class="form-group">
                    <label for="tb_email" class="control-label col-md-1">&nbsp;Email</label>
                    <div class="col-md-6">
                        <input id="tb_email" class="form-control" type="email" placeholder="Email">
                    </div>
                </div>
                <div class="form-group">
                    <label for="tb_email" class="control-label col-md-1">&nbsp;Email</label>
                    <div class=" col-md-6">
                        <div class="input-group">
                            <span class="input-group-addon">T</span>
                            <input id="tb_email" class="form-control" type="email" placeholder="Email">
                            <span class="input-group-addon">E</span>
                        </div>
                    </div>
                </div>
                <textarea rows="3" class="form-control"></textarea>
            </form>
        </div>
        <div class="input-group date datepicker" data-provide="datepicker">
            <input type="text" class="form-control">
            <div class="input-group-addon">
                <span class="glyphicon glyphicon-th"></span>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            $('.datepicker').datepicker({
                language: "zh-CN",
                format: 'yyyy-dd-mm',
                startDate: '-3d'
            });
        });

    </script>

    </html>
</DOCTYPE>